import React from 'react'
import style from './style'
import util from '../../util'
import tmpl from '../../libs/underscore-template'
import moment from 'moment'
moment.locale('zh-cn')

export default class MessageBlock extends React.Component {
  getText = (key, msg) => {
    switch(key){
      case 'content':
        return `<a href="${msg.linkURL}" target="_blank" style="color:#0779c3;text-decoration:none">` + (msg.objectContent ? util.substr(util.emoji.dec(msg.objectContent.content), 50) : '') + '</a>';
        break;
      case 'users':
        return msg.users 
                ? msg.users.reduce((total, v) => 
                  total + `<a href="#/okr/objective-targetAll?userId=${v.userId}" style="color:#0779c3;text-decoration:none">` + v.fullName + '</a> ', '') 
                : '';
        break;
      case 'link':
        return `<a href="${msg.linkURL}" style="color:#0779c3;text-decoration:none">${msg.linkText}</a>`;
        break;
      case 'publicDeadline':
      case 'peerReviewDeadline':
      case 'peerDeadline':
      case 'timestamp':
        return msg.objectContent ? moment(msg.objectContent[key]).format('YYYY.MM.DD') : '';
        break;
      default:
        return msg.objectContent ? msg.objectContent[key] : '';
        break;
    }
  }
  template(str) {
    const msg = this.props.msg
    let obj = {}
    /*
    obj['content'] = `<a href="${msg.linkURL}" target="_blank" style="color:#0779c3;text-decoration:none">` + (msg.objectContent ? msg.objectContent.content : '') + '</a>'
    obj['users']   = msg.users 
                    ? msg.users.reduce((total, v) => 
                      total + `<a href="#/user/${v.userId}" style="color:#0779c3;text-decoration:none">` + v.fullName + '</a> ', '') 
                    : ''
    obj['publicDeadline'] = msg.objectContent ? moment(msg.objectContent.publicDeadline).format('YYYY.MM.DD') : ''
    obj['peerReviewDeadline'] = msg.objectContent ? moment(msg.objectContent.peerDeadline).format('YYYY.MM.DD') : ''
    obj['peerDeadline'] = msg.objectContent ? moment(msg.objectContent.peerDeadline).format('YYYY.MM.DD') : ''
    obj['link'] = `<a href="${msg.linkURL}" style="color:#0779c3;text-decoration:none">${msg.linkText}</a>`
    obj['templateName'] = msg.objectContent ? msg.objectContent.templateName : ''
    obj['userName'] = msg.objectContent ? msg.objectContent.userName : '';
    obj['revieweeName'] = msg.objectContent ? msg.objectContent.revieweeName : '';
    obj['peerCount'] = msg.objectContent ? msg.objectContent.peerCount : '';
    obj['date'] = msg.objectContent ? msg.objectContent.date : '';
    */
    const list = str.match(/\{\{[^\{\}]+\}\}/g);
    (list||[]).map((v) => {
      const key = v.replace(/^\{\{(.*)\}\}$/, '$1');
      obj[key] = this.getText(key, msg);
    })
    return tmpl(str)(obj)
  }
  render(){
    const msg = this.props.msg
    const { content, users, senders, publicDeadline } = msg

    return (
      <div data-type="message" data-read={msg.isRead} className={style.message_block} dangerouslySetInnerHTML={{__html: this.template(msg.template)}} />
    )
  }
}
